<template>
	<!-- 我的团队 -->
	<view class="my-group">
		<!--  头部 -->
		<view class="head">
			<view class="head-img">
				<image :src="userInfo.avatar?userInfo.avatar:'/static/images/head_default.png'" mode="aspectFill">
				</image>
			</view>
			<view class="head-info">
				<view class="row">
					<view class="name">
						<button>{{ userInfo.realName }}</button>
					</view>
					<view v-if="userInfo.srStatus !== '1'" class="authentication-status" @click="topage('/pages/rlrz/rlrz')">
						去实名<uni-icons type="right" size="14" color="#AC6C17"></uni-icons>
					</view>
					<view v-if="userInfo.srStatus == '1'" class="authentication-status authentication-status-yrz" >已实名</view>
				</view>

				<view class="block-text">
					<view class="text-btn" @click="topage('/pages/membership/membership')">
						{{ userInfo.userType == 'vip'?'续约会员':'开通会员' }}
					</view>
				</view>
			</view>
		</view>
		<view class="my-group-num">
			<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/kthy_bg.png" mode="aspectFill"></image>
			<view class="my-group-num-main">
				<view class="item">
					<view class="num">{{ groupSize }}</view>
					<view class="text">团队人数</view>
				</view>
				<view class="item">
					<view class="num">{{ rebate }}</view>
					<view class="text">累计返佣</view>
				</view>
			</view>
			
		</view>

		<!-- tab切换 -->
		<uni-segmented-control :current="current" :values="items" :style-type="styleType" :active-color="activeColor"
			@clickItem="onClickItem" />
		<view class="content">
			<!-- 加载中效果 -->
			<uni-load-more v-if="loading" status="loading" />

			<view v-if="!loading && memberList.length > 0">
				<rmzy :rmzyData="memberList" mgGroup="true"></rmzy>
			</view>

			<!-- 暂无数据显示 -->
			<view class="zwxx-img" v-if="!loading && memberList.length === 0">
				<image src="https://luntan.xiaouyf.cn/uecs-wechat/static/img/qianduan/zwxx.png" mode="widthFix"></image>
				<view>暂无数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSegmentedControl from '@/uni_modules/uni-segmented-control/components/uni-segmented-control/uni-segmented-control.vue'
	import Rmzy from '../../components/Rmzy.vue' // 人脉资源
	export default {
		components: {
			uniSegmentedControl,
			Rmzy
		},
		data() {
			return {
				groupSize: 0, // 团队人数
				rebate: 0, // 累计返佣
				items: ['全部', '非会员', '会员'],
				current: 0,
				styleType: 'text',
				activeColor: '#AC6C17',
				memberList: [],
				loading: false
			}
		},
		computed: {
			// 从 Vuex 获取登录状态和用户信息
			isLoggedIn() {
				return this.$store.state.user.isLoggedIn;
			},
			userInfo() {
				return this.$store.state.user.userInfo;
			}
		},
		onLoad() {
			this.groupGetInfo() // 获取用户团队信息
			this.getGroupMoney() // 获取团队佣金
		},
		methods: {
			groupGetInfo() {
				const requestData = {
					userId: this.userInfo.guid,
				}
				this.$api.groupGetInfo(requestData).then(res => {
					if (res.succ) {
						this.memberList = res.data || []
						this.groupSize = res.data.length || 0
					}
				})
			},
			// 获取团队佣金
			getGroupMoney() {
				const requestData = {
					userId: this.userInfo.guid,
				}
				this.$api.getGroupMoney(requestData).then(res => {
					if (res.succ) {
						this.rebate = res.data || 0
					}
				})
			},
			// tab切换
			onClickItem(index) {
				const currentIndex = Number(index.currentIndex);
				if (this.current !== currentIndex) {
					this.current = currentIndex;
					this.filterMemberList(currentIndex);
				}
			},
			// 根据当前tab筛选成员列表
			filterMemberList(i) {
				console.log('当前tab索引：', i);
				this.loading = true;

				// 重新获取原始数据
				this.groupGetInfo();

				// 根据不同的tab索引进行筛选
				setTimeout(() => {
					if (i === 0) {
						// 全部数据，不需要筛选
						this.loading = false;
					} else if (i === 1) {
						// 非会员：筛选 authStatus 不等于 1 的数据
						this.memberList = this.memberList.filter(item => item.authStatus !== '1' && item.authStatus !== '2');
						this.loading = false;
					} else if (i === 2) {
						// 会员：筛选 authStatus 等于 1 的数据
						this.memberList = this.memberList.filter(item => item.authStatus === '1' || item.authStatus === '2');
						this.loading = false;
					}
				}, 500);
			}
		}
	}
</script>

<style lang="less">
	.my-group {
		height: 100%;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FAEBDB 0%, rgba(255, 247, 238, 0) 500rpx);

		.head {
			display: flex;
			align-items: center;
			margin: 40rpx 10rpx;

			.head-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
				overflow: hidden;

				image {
					width: 120rpx;
					height: 120rpx;
					object-fit: cover;
				}
			}

			.head-info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;

				.row {
					display: flex;
					align-items: center;

					.name {
						font-size: 32rpx;
						color: #000;
						font-weight: bold;
						margin-left: 10rpx;

						button {
							background: none;
							border: none;
							outline: none;
							padding: 0;
							line-height: 1;

							&::after {
								border: none;
							}
						}

						&.name-red {
							button {
								color: #DB943C;
							}

						}
					}

					.authentication-status {
						position: absolute;
						top: 40rpx;
						right: 0;
						width: 160rpx;
						height: 64rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						background: #FFEFD9;
						border-radius: 20rpx 0rpx 0rpx 20rpx;
						font-size: 30rpx;
						color: #AC6C17;
					}
				}

				.block-text {
					display: flex;
					align-items: center;
					margin-top: 35rpx;

					.text-btn {
						display: inline-flex;
						width: 115rpx;
						height: 56rpx;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						padding: 0 20rpx;
						color: #FFFFFF;
						background: linear-gradient(180deg, #F3B359 0%, #EC6A34 100%);
						border-radius: 44rpx 44rpx 44rpx 44rpx;
						margin-right: 15rpx;
					}

					.text {
						font-size: 28rpx;
						color: #AC6C17;
					}

				}
			}
		}

		.my-group-num {
			position: relative;
			display: flex;
			margin: 30rpx 0 30rpx;
			>image{
				z-index: 1;
				position: relative;
				width: 100%;
				height: 202rpx;
				border-radius: 20rpx;
			}
			.my-group-num-main{
				z-index: 2;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: space-around;
			}

			.item {
				position: relative;
				flex: 1;
				dsiplay: flex;
				justify-content: center;
				text-align: center;

				.num {
					font-size: 56rpx;
					color: #F8EFD8;
					font-weight: bold;
				}

				.text {
					font-size: 32rpx;
					margin-top: 14rpx;
					color: #F8EFD8;
				}
			}
		}

		// tab切换样式
		.segmented-control {
			position: relative;
			height: 100rpx !important;
		
			&::after {
				z-index: -1;
				content: '';
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 1rpx;
			}
		
			.segmented-control__text {
				padding: 15px 10rpx !important;
				font-size: 32rpx !important;
			}
		
			.segmented-control__item--text {
				position: relative;
		
				&::after {
					z-index: 2;
					content: '';
					position: absolute;
					left: 10rpx;
					right: 10rpx;
					bottom: -1px;
					height: 4rpx;
					background: #AC6C17;
				}
			}
		}

		.content {
			margin: 10rpx 30rpx;
			flex: 1;
			overflow: auto;

			.member-item {
				position: relative;
				display: flex;
				padding: 45rpx 0;

				&::after {
					content: '';
					position: absolute;
					left: 0;
					right: 0;
					bottom: 0;
					height: 1rpx;
					background: rgba(2, 2, 2, .1);
					transform: translateY(.5);
				}

				&:last-child {
					&::after {
						display: none;
					}
				}

				.left {
					display: flex;
					align-items: center;
					flex: 1;

					.head {
						position: relative;

						.profilephoto {
							width: 100rpx;
							height: 100rpx;
							border: 5rpx solid #fff;
							border-radius: 100%;

							&.profilephoto-vip {
								border: 5rpx solid #E09E40;
								border-radius: 100%;
							}
						}

						.vip {
							width: 84rpx;
							position: absolute;
							left: 50%;
							bottom: 4rpx;
							margin-left: -42rpx;
						}
					}

					.text-w {
						display: flex;
						flex-direction: column;
						margin-left: 28rpx;

						.name {
							font-size: 32rpx;
							color: #020C07;
						}

						.text {
							font-size: 26rpx;
							margin-top: 30rpx;
							color: #444;
						}
					}
				}

				.right {
					font-size: 24rpx;
					color: #666;
					margin-top: 78rpx;
				}
			}
		}

		// 暂无数据样式
		.zwxx-img {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 50rpx 0;

			image {
				width: 300rpx;
			}

			view {
				margin-top: 20rpx;
				font-size: 28rpx;
				color: #999;
			}
		}
	}
</style>